<template>
  <div class="px-2 py-4 home border-box">
    <ju-helloword></ju-helloword>
    <div class="p-2">
      <img :src="captchaCode"/>
      <el-button type="primary" @click="doRefreshCode"> 刷新验证码</el-button>
    </div>

    <role-select v-model="role"></role-select>
    <div class="demo"
         @click="doing">
      <img alt=""
           src="@/assets/bg-sidebar.jpg"
           style="pointer-events: none" />
      asdkflkj
    </div>
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from "@some21/vue-class-decorator";

  @Component({
    name: "Home-DashboardView",
    components: {
      JuHelloword: () => import("./JuHelloword.vue"),
      RoleSelect: () => import("../../components/Forms/RoleSelect.vue"),
    },
  })
  export default class Home extends Vue {
    get isDebug() {
      return process.env.NODE_ENV === "development";
    }
    nowTime = new Date();
    role = "777";

    doing() {
      alert(123);
    }
    captchaCode="";

    doRefreshCode() {
      fetch("/proxy/api/captcha?scheme=default").then(async res => {
        const data = await res.json();

        const binary = atob(data.base64);
        let n = binary.length;
        const array = new Uint8Array(binary.length);
        while (n--) {
          array[n] = binary.charCodeAt(n);
        }

        this.captchaCode = URL.createObjectURL(new Blob([array], { type: "image/gif" }));


        // "data:image/gif;base64,
      //  this.captchaCode=URL.createObjectURL(res);
      });


    }
    // activated() {
    //   debugger;
    // }
    // deactivated() {
    //   debugger;
    // }
  }
</script>

<style lang="scss" scoped>
  .home {
    .home-content {
      max-width: 1080px;
    }
  }
  .demo {
  }
</style>
